<template>
  <div>
    <el-tag>{{ props.param.warehouseID }}</el-tag>
    <el-tag>{{ "第" + props.param.z + "层" + "第" + props.param.x + "排" + props.param.y + "列" }}</el-tag>
    <br>
    <!-- <el-progress type="dashboard" :status="cssProgress(props.param.occRatio)" :percentage=props.param.occRatio :stroke-width="15" >-->
    <el-progress type="dashboard" :color="cssProgress(props.param.occRatio)" :percentage=props.param.occRatio :stroke-width="15" > 
      <template #default="{ percentage }">
        <span class="percentage-value">{{ props.param.occRatio }}%</span>
        <br>
        <span class="percentage-label">使用率</span>
      </template>
    </el-progress>
    <div class="mb-4">
    <!-- <el-button plain>Plain</el-button> -->
    <el-button type="primary" round @click="open3">出库</el-button>
    <!-- <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button> -->
    <el-button type="warning" round @click="open3">重绑定</el-button>
    <el-button type="danger" round @click="open3">清空</el-button>
    <el-button type="info" round @click="open3">历史记录</el-button>
  </div>
  </div>
</template>
<style scoped>
.aaa {
  width: 90px;
  cursor: pointer;
}
</style>
<script lang="ts" setup>
import { computed, ref, reactive, onMounted, watch } from 'vue'
import api from '/@/api/sy/apiWMS.js';
import { ElMessage } from 'element-plus'
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
const router = useRouter();
const props = (defineProps(['param']))
function cssProgress(val: number) {
  if (val == null) {
    props.param.occRatio = 0;
  }
  if (val <= 30 && val >= 0) {
    return "#AFEEEE"//青色
  }
  else if (val <= 70 && val > 30) {
    return "#00FFFF"//深青色
  } else if (val <= 80 && val > 70) {
    return "#FFA500"//橙色
  }else if (val <= 99 && val > 80) {
    return "#FF8C00"//深橙色
  } else {
    return "#FF0000"//红色
  }
}
// 库位属性
interface interfaceStorageLocation {
  warehouseID: number,
  x: number,
  y: number,
  z: number,
  state: number,
  isHave: boolean,
  codeName: string,
  occRatio: number,
  updateTime: Date | null
  createTime: Date | null
}
// 库位数据
const storageLocation = ref<interfaceStorageLocation>()

// 按钮触发弹窗
const open3 = () => {
  ElMessage({
    message: '功能未完善',
    type: 'warning',
  })
}

onMounted(async () => {
  console.log(props.param);
  console.log(props.param.warehouseID);
  storageLocation.value = props.param
  //  
  // 在这里写逻辑
});

</script>
  